<template>
	<div class="spread con">
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/goods' }">首页</el-breadcrumb-item>
		  	<el-breadcrumb-item>筛选列表</el-breadcrumb-item>
		</el-breadcrumb>
		<el-table
		    :data="tableData"
		    style="width: 100%">
		    
		    <!-- <el-table-column type="expand">
		      <template slot-scope="props">
		        <el-form label-position="left" inline class="demo-table-expand">
		          <el-form-item label="品类属性">
		            <span v-for="item in props.row.cate_id">{{ item.cate_name }}   </span>
		          </el-form-item>
		        </el-form>
		      </template>
		    </el-table-column> --> 
		    
		    <el-table-column
		      label="日期"
		      width="200">
		      	<template slot-scope="scope">
		        	 <i class="el-icon-time"></i>
		        	<span style="margin-left: 10px">{{ scope.row.create_time.date.substr(0,19) }}</span>
		      	</template> 
		    </el-table-column>
		    
		    <el-table-column
		      label="商品 ID"
		      width="180"
		      prop="id">
		    </el-table-column>
		    
		    <el-table-column
		      label="商品名称"
		      prop="screen_cate_name">
		    </el-table-column>

		    <el-table-column label="操作">
		      <template slot-scope="scope">
		        <el-button
		          size="mini"
		          @click="handleEdit(scope.$index, scope.row)">编辑筛选</el-button>
		        <!-- <el-button
		          size="mini"
		          type="danger"
		          @click="handleDelete(scope.$index, scope.row)">下架商品</el-button> -->
		      </template>
		    </el-table-column>
		</el-table>
	</div>
</template>

<script type="text/javascript">
	export default {
		data(){
			return {
				tableData: []
			}
		},
		created(){
			this.getGoodsList();
		},
		methods:{
			getGoodsList(){
				axios.get('/api/screens')
					.then(result => {
						if(result.data.code == 200){
							console.log(this.tableData,"aaaaaa",result.data.result);
							this.tableData = this.handleData(result.data.result);

						}
					})
					.catch(error => {

					})
			},
			handleData(data){
				var temp = [];
				for(var i=0;i<data.length;i++){
					data[i].cate_id = JSON.parse(data[i].cate_id);
					temp.push(data[i]);
				}
				return temp;
			},
			handleEdit(index, row) {
		        console.log(index, row);
		        this.$router.push({ path: '/screen/edit/'+row.id})
		    },
		    handleDelete(index, row) {
		        console.log(index, row);
		    }
		}
	}
</script>

<style lang="scss">
  	.el-table .warning-row {
    	background: oldlace;
  	}
  	.el-select .el-input {
    	width: 120px;
  	}
  	.input-with-select .el-input-group__prepend {
    	background-color: #fff;
  	}
  	.el-table .success-row {
    	background: #f0f9eb;
  	}
  	.con{
	    .el-breadcrumb{
	      	height: 40px;
	    }
  	}
</style>
